import type { PropType } from 'vue'
import type { ExtractProps } from '@/utils/type'
import styleVar from '@/styles/variable.module.scss'
import { toStrFirstCase } from '@/utils'
import { t } from '@/locale'

namespace Input {
  export const name = toStrFirstCase(`${styleVar.namespace}Input`)
  export type InputType = 'text' | 'number' | 'idcard' | 'tel' | 'digit'
    | 'safe-password' | 'nickname' | 'code' | 'password' | 'phone' | 'email' | 'textarea'
  export const props = {
    modelValue: [String, Number],
    /**
     * 文本框类型
     * @默认 text
     */
    type: {
      type: String as PropType<InputType | (string & {})>,
      default: 'text'
    },
    /**
     * 文本占位符
     */
    placeholder: String,
    disabled: Boolean,
    /**
     * 是否显示清空按钮
     * @默认 true
     */
    clearable: {
      type: Boolean,
      default: true
    },
    /**
     * 获取验证码函数
     */
    getCode: Function as PropType<() => any>,
    /**
     * 多少获取一次验证码
     * @unit s
     * @默认 60
     */
    getCodeGap: {
      type: Number,
      default: 60
    },
    /**
     * 是否显示输入统计字符数量
     */
    showWordLimit: Boolean,
    /**
     * 原生 input、textarea 参数列表
     */
    nativeProps: Object,
  }
  export const emits = {
    'update:modelValue': (_val: string) => true,
    'change': (_val: string) => true,
    'input': (_val: string) => true,
    'focus': (_val: string) => true,
    'blur': (_val: string) => true,
    clear: () => true
  }
  export type Props = ExtractProps.Types<typeof props> & PartialEmits<typeof emits>
  export type Slots = {
    prefix: () => void
    suffix: () => void
  }
  export const Component = <{
    new(): {
      $props: Props
      $slots: Slots
    }
  }>{}
  export const variables = {
    typeConfig: new Map([
      ['code', {
        type: 'number',
        inputmode: 'numeric' as const,
        maxlength: 6,
        placeholder: t('components.input.PleaseEnterCode')
      }],
      ['email', {
        type: 'text',
        inputmode: 'email' as const,
        placeholder: t('components.input.PleaseEnterEmail')
      }],
      ['password', {
        type: 'password' as const,
        placeholder: t('components.input.PleaseEnterPassword')
      }],
      ['phone', {
        type: 'tel',
        inputmode: 'tel' as const,
        placeholder: t('components.input.PleaseEnterPhone'),
        maxlength: 11
      }]
    ])
  }
}

export default Input